<script setup>
import {onMounted, ref} from "vue";
import {manageStore} from "../../../stores/counter.js";
import {createApi, deleteApi, listApi, listApiByApiGroupUkId, updateApi} from "../../../http/manage/api.js";
import {
  createApiGroup,
  deleteApiGroup,
  listApiGroup,
  listApiGroupTree,
  updateApiGroup
} from "../../../http/manage/apiGroup.js";

let currentApiGroup = ref({})
let parentUkId = ref(0)
let apiTableData = ref([])
let apiGroupTreeTableData = ref([])

const apiGroupTreeFormProps = {
  children: 'children',
  label: 'name',
}

let apiName = ref("")
let apiForm = ref({})
let showApiForm = ref(false)
let apiUpdate = ref(false)

let apiGroupForm = ref({})
let showApiGroupForm = ref(false)
let apiGroupUpdate = ref(false)

function showApiCreate() {
  apiForm.value = {
    groupUkId : currentApiGroup.value.ukId
  }
  showApiForm.value = true
  apiUpdate.value = false
}

function showApiUpdate(api) {
  apiForm.value = api
  showApiForm.value = true
  apiUpdate.value = true
}

function handleApiSave() {
  if (apiUpdate.value) {
    handleApiUpdate()
  } else {
    handleApiCreate()
  }
}

function handleApiCreate() {
  createApi(apiForm.value).then(response => {
    apiTableData.value = response.data
    showApiForm.value = false
    handleApiGroupTableRowClick(currentApiGroup.value)
  })
}

function handleApiUpdate() {
  updateApi(apiForm.value).then(response => {
    apiTableData.value = response.data
    showApiForm.value = false
    handleApiGroupTableRowClick(currentApiGroup.value)
  })
}

function handleApiDelete(api) {
  deleteApi(api.ukId).then(response => {
    handleApiList()
  })
}

function handleApiList() {
  listApi(apiName.value).then(response => {
    apiTableData.value = response.data
  })
}

function showApiGroupCreate(parentUkId) {
  apiGroupForm.value = {
    parentUkId : parentUkId
  }
  showApiGroupForm.value = true
  apiGroupUpdate.value = false
}

function showApiGroupUpdate(apiGroup) {
  apiGroupForm.value = apiGroup
  showApiGroupForm.value = true
  apiGroupUpdate.value = true
}

function handleApiGroupSave() {
  if (apiGroupUpdate.value) {
    handleApiGroupUpdate()
  } else {
    handleApiGroupCreate()
  }
}

function handleApiGroupCreate() {
  createApiGroup(apiGroupForm.value).then(response => {
    handleApiGroupTreeList(parentUkId.value)
    showApiGroupForm.value = false
  })
}

function handleApiGroupUpdate() {
  updateApiGroup(apiGroupForm.value).then(response => {
    handleApiGroupTreeList(parentUkId.value)
    showApiGroupForm.value = false
  })
}

function handleApiGroupDelete(apiGroup) {
  deleteApiGroup(apiGroup.ukId).then(response => {
    handleApiGroupTreeList(parentUkId.value)
  })
}

function handleApiGroupList() {
  listApiGroup().then(response => {
    apiGroupTreeTableData.value = response.data
  })
}

function handleApiGroupTreeList(parentUkId) {
  listApiGroupTree(parentUkId).then(response => {
    apiGroupTreeTableData.value = response.data
  })
}

function handleApiGroupTableRowClick(apiGroup) {
  currentApiGroup.value = apiGroup
  listApiByApiGroupUkId(apiGroup.ukId).then(response => {
    apiTableData.value = response.data
  })
}

onMounted(() => {
  handleApiGroupTreeList(parentUkId.value)
})


</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 50%; height: 100%; overflow: hidden; padding-left: 5px;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px; padding-left: 5px">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="名称">
          <el-input style="width: 200px" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleApiGroupList">查询</el-button>
          <el-button type="primary" @click="showApiGroupCreate(0)">新建接口组</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; width: 100%; height: 100%; overflow: auto;">
      <el-table
          highlight-current-row
          border
          default-expand-all
          @row-click="handleApiGroupTableRowClick"
          row-key="ukId"
          :data="apiGroupTreeTableData" style="width: 100%;">
        <el-table-column prop="name" label="接口组名称" min-width="100"/>
        <el-table-column prop="sort" label="排序" width="60"/>
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button @click="showApiGroupCreate(scope.row.ukId)">
              创建下级组
            </el-button>
            <el-button @click="showApiGroupUpdate(scope.row)">
              编辑
            </el-button>
            <el-popconfirm
                width="170"
                hide-icon
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="handleApiGroupDelete(scope.row)"
                :title="'是否确认删除接口数据 [ ' + scope.row.name + ' ] ？'">
              <template #reference>
                <el-button type="danger">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden; padding-left: 5px; padding-right: 5px">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px; padding-left: 5px">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="名称">
          <el-input style="width: 200px" v-model="apiName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleApiList">查询</el-button>
          <el-button type="primary" @click="showApiCreate()">新建接口</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; width: 100%; height: 100%; overflow: auto;">
      <el-table
          highlight-current-row
          :data="apiTableData" border style="width: 100%;">
        <el-table-column prop="name" label="名称" min-width="150"/>
        <el-table-column prop="uri" label="地址" min-width="150"/>
        <el-table-column prop="type" label="类型" min-width="70"/>
        <el-table-column prop="authority" label="权限" min-width="200"/>
        <el-table-column prop="status" label="状态" width="70">
          <template #default="scope">
            <el-switch
                @change="apiForm = scope.row; handleApiUpdate()"
                active-value="enable"
                inactive-value="disable"
                v-model="scope.row.status "
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60"/>
        <el-table-column label="操作" width="160">
          <template #default="scope">
            <el-button @click="showApiUpdate(scope.row)">
              编辑
            </el-button>
            <el-popconfirm
                width="170"
                hide-icon
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="handleApiDelete(scope.row)"
                :title="'是否确认删除接口数据 [ ' + scope.row.name + ' ] ？'">
              <template #reference>
                <el-button type="danger">
                  删除
                </el-button>高
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog title="接口管理" v-model="showApiForm" :close-on-click-modal="false">
    <el-form ref="form" :model="apiForm" label-width="80px">
      <el-form-item label="接口组">
        <el-tree-select
            check-strictly=true
            node-key="ukId"
            v-model="apiForm.groupUkId"
            :props="apiGroupTreeFormProps"
            :data="apiGroupTreeTableData"
        />
      </el-form-item>
      <el-form-item label="接口名称">
        <el-input v-model="apiForm.name"></el-input>
      </el-form-item>
      <el-form-item label="接口地址">
        <el-input v-model="apiForm.uri"></el-input>
      </el-form-item>
      <el-form-item label="接口类型">
        <el-input v-model="apiForm.type"></el-input>
      </el-form-item>
      <el-form-item label="接口权限">
        <el-input v-model="apiForm.authority"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="apiForm.status">
          <el-option
              v-for="item in manageStore().status"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="apiForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleApiSave">Save</el-button>
        <el-button @click="showApiForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog title="接口组管理" v-model="showApiGroupForm" :close-on-click-modal="false">
    <el-form ref="form" :model="apiGroupForm" label-width="100px">
      <el-form-item label="上级接口组">
        <el-tree-select
            check-strictly=true
            node-key="ukId"
            v-model="apiGroupForm.parentUkId"
            :props="apiGroupTreeFormProps"
            :data="apiGroupTreeTableData"
        />
      </el-form-item>
      <el-form-item label="接口组名称">
        <el-input v-model="apiGroupForm.name"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="apiGroupForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleApiGroupSave">Save</el-button>
        <el-button @click="showApiGroupForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>

</style>